<template>
    <div>
        <div class="jc">
            <span>
                <h2>轮播图广告</h2>
            </span>
            <span class="btn">
                <el-button type="primary" @click="add()"  style="margin:auto">
                    添加
                </el-button>
            </span>
        </div>
        <div style="margin:5px">
            
            <el-table :data="hots"  border >
                <el-table-column fixed
                    prop="memo" label="描述" min-width="25%">
                </el-table-column>
                <el-table-column 
                    prop="hot" label="热度" min-width="15%">
                </el-table-column>
                <el-table-column 
                    prop="type" label="类型" min-width="15%">
                </el-table-column>

                <el-table-column label="图片" min-width="15%">
					<template slot-scope="scope">
						<div style="width: 100px;height: 100px;">
							<img v-bind:src="`${imgUrl}/api/public/showImg/${scope.row.picture}`"
								style="width: 100px; height: 100px;" />
						</div>
					</template>
				</el-table-column>

                <el-table-column label="操作" min-width="15%" >
					<template slot-scope="scope">
						<el-button type="danger" @click="del(scope.row.id)">
							删除
						</el-button>
					</template>
				</el-table-column>

            </el-table>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Hot",
        props: [],
        data() {
            return {
                hots:[]
            };
        },
        methods: {
            del(id){
                this.$get("/api/adm/hot/delete/"+id).then(
                    function(resp) {
                        _this.hots = resp.data.data
                    }
                )
            },
            add(){
                this.$router.push({
                    path : "/adm/hot/add"
                })
            }
        },
        mounted() {
            window._this = this;
            this.$get("/api/adm/hot/findAll").then(
                function(resp) {
                    _this.hots = resp.data.data
                }
            )
        }
    };
</script>
<style scoped="scoped">
    .jc{
        display: flex;
        margin: 0 5px;
        justify-content:space-between;
        border-bottom: 2px solid gray;
        }
    table tr{
        line-height: 40px;
        border-top: 2px solid;
    }
    table{
        width:90%;
        border-collapse: collapse;
    }
    .btn{
        display: flex;
        justify-content: center;
        align-content:center;
    }
</style>
